<script setup lang="ts">
const { login, form } = useAuth()
const redirect = useUtil().routeQuery('redirect', null)
</script>

<template>
  <div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
    <div class="relative py-3 sm:max-w-xl sm:mx-auto">
      <div
        class="absolute inset-0 bg-gradient-to-r from-cyan-400 to-sky-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"
      ></div>
      <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20">
        <div class="max-w-md mx-auto">
          <h1 class="text-2xl font-semibold">Login</h1>
          <div class="py-8">
            <n-form :label-width="80" :model="form">
              <n-form-item label="账号" path="email">
                <n-input placeholder="请输入账号" v-model:value="form.email" />
              </n-form-item>
              <n-form-item label="密码" path="password">
                <n-input
                  type="password"
                  show-password-on="mousedown"
                  placeholder="请输入密码"
                  :minlength="4"
                  v-model:value="form.password"
                />
              </n-form-item>
              <n-form-item>
                <n-button style="width: 100%" type="primary" @click="login(redirect)">
                  登 录</n-button
                >
              </n-form-item>
            </n-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
